<% include ../../../../../index/pages/nav.ejs %>
    <!-- Page Content -->
    <div id="page-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12" style="margin-top:51px">
                    <h1 class="page-header">云平台虚拟机资源消耗</h1>
                    <ol class="breadcrumb">
                        <li>
                            <i class="fa fa-bar-chart-o"></i><a href="/resource/">节点列表</a>
                        </li>
                        <li>
                            <i class="fa fa-bar-chart-o"></i><a href="<%= originalUrl.substr(0,originalUrl.length-4)%>">宿主机列表</a>
                        </li>
                        <li>
                            <i class="fa fa-bar-chart-o"></i><a href="<%= originalUrl.substr(0,originalUrl.length-2)%>">虚拟机列表</a>
                        </li>
                        <li class="active">
                            <i class="fa fa-bar-chart-o"></i>虚拟机详情
                        </li>
                    </ol>
                </div>
                <!-- /.col-lg-12 -->
                <div class="container">
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
                        <!-- Build your select: -->
                        <div class="pull-right">
                            <i class="fa fa-calendar fa-2x" aria-hidden="true"></i>
                            <select class="multiselect">
                                        <option value="0">实时监控</option>
                                        <option value="1">最近一天</option>
                                        <option value="2">最近三天</option>
                                        <option value="3">最近一周</option>
                                        <option value="4">最近一个月</option>
                                  </select>
                        </div>
                    </div>
                    <!-- /.navbar-collapse -->
                </div>
                <div class="container-fluid" style="margin-top:-40px;">
                    <div>
                        <span>当前在线</span>
                        <span id="onlineCount"></span>
                        <span>人</span>
                    </div>
                    <div><span>资源使用情况:<span id="predicted"></span></span>
                    </div>
                    <div>
                        <!--include dynamic-data.html-->
                        <!--include pie.html-->
                        <!--include line.html-->
                        <!--include ladder.html-->
                        <div id="realtime_chart">
                            <%include gauge_cpu.html%>
                                <%include dynamic-data_cpu.html%>
                                    <%include gauge_mem.html%>
                                        <%include dynamic-data_mem.html%>
                        </div>
                        <div id="history_chart" style="display:none">
                            <%include history.html%>
                        </div>
                    </div>
                    <% include ../../../../../index/pages/footer.html %>
                        <script src="/socket.io/socket.io.js"></script>
                        <script src="/javascripts/log_client.js"></script>
                </div>
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /#page-wrapper -->
    </div>
    <!-- /#wrapper -->
    <script>
        function lastMonthDate() {
            var Nowdate = new Date();
            var vYear = Nowdate.getFullYear();
            var vMon = Nowdate.getMonth() + 1;
            var vDay = Nowdate.getDate();　　 //每个月的最后一天日期（为了使用月份便于查找，数组第一位设为0）
            var daysInMonth = new Array(0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
            if (vMon == 1) {
                vYear = Nowdate.getFullYear() - 1;
                vMon = 12;
            } else {
                vMon = vMon - 1;
            }　　 //若是闰年，二月最后一天是29号
            if (vYear % 4 == 0 && vYear % 100 != 0) {
                daysInMonth[2] = 29;
            }
            if (daysInMonth[vMon] < vDay) {
                vDay = daysInMonth[vMon];
            }
            // if (vDay < 10) {
            //     vDay = "0" + vDay;
            // }
            // if (vMon < 10) {
            //     vMon = "0" + vMon;
            // }
            var date = vYear + "-" + vMon + "-" + vDay;
            // console.log(date)
            return date;
        }

        //求时间数组中指定最小值索引
        function get_start_time_index(element, index, array) {
            var current_number = new Date(element).getTime();
            return current_number >= start_time_number;
        }

        //求时间数组中指定最大值索引
        function get_end_time_index(element, index, array) {
            var current_number = new Date(element).getTime();
            return current_number >= end_time_number;
        }

        $(document).ready(function () {
            $('.multiselect').multiselect({
                buttonWidth: '160px',
                //切换选择的chart
                onChange: function (option, checked) {
                    if (checked) {
                        var selected = option[0].value;
                        if (selected > 0) {
                            $("#realtime_chart").css("display", "none");
                            $("#history_chart").css("display", "block");
                            //当前时间
                            var curDate = new Date();
                            //最近一天
                            if (selected == 1) {
                                //前一天
                                var preDate_lastday = new Date(curDate.getTime() - 24 * 60 * 60 *
                                    1000);
                                var preDate_lastday_str = preDate_lastday.getFullYear().toString() +
                                    "-" +
                                    (preDate_lastday.getMonth() + 1) + "-" + preDate_lastday.getDate();
                                var start_time_str = preDate_lastday_str + " 00:00:00";
                                var end_time_str = preDate_lastday_str + " 23:59:59";
                                start_time_number = new Date(start_time_str).getTime();
                                var start_time_index = timeData.findIndex(get_start_time_index);
                                end_time_number = new Date(end_time_str).getTime();
                                var end_time_index = timeData.findIndex(get_end_time_index);
                               //渲染chart
                                option_history.dataZoom.forEach(function(data){
                                    data.startValue = start_time_index;
                                    data.endValue = end_time_index;
                                })
                                myChart_history.setOption(option_history);
                            }
                            //最近三天
                            else if (selected == 2) {
                                //前三天的00:00:00
                                var preDate_last3day = new Date(curDate.getTime() - 3 * 24 * 60 *
                                    60 * 1000);
                                var preDate_last3day_str = preDate_last3day.getFullYear().toString() +
                                    "-" +
                                    (preDate_last3day.getMonth() + 1) + "-" + preDate_last3day.getDate();
                                var start_time_str = preDate_last3day_str + " 00:00:00";
                                //前一天的23:59:59
                                var preDate_lastday = new Date(curDate.getTime() - 24 * 60 * 60 *
                                    1000);
                                var preDate_lastday_str = preDate_lastday.getFullYear().toString() +
                                    "-" +
                                    (preDate_lastday.getMonth() + 1) + "-" + preDate_lastday.getDate();
                                var end_time_str = preDate_lastday_str + " 23:59:59";
                                start_time_number = new Date(start_time_str).getTime();
                                var start_time_index = timeData.findIndex(get_start_time_index);
                                end_time_number = new Date(end_time_str).getTime();
                                var end_time_index = timeData.findIndex(get_end_time_index);
                               //渲染chart
                                option_history.dataZoom.forEach(function(data){
                                    data.startValue = start_time_index;
                                    data.endValue = end_time_index;
                                })
                                myChart_history.setOption(option_history);
                            }
                            //最近一周
                            else if (selected == 3) {
                                //前一周的00:00:00
                                var preDate_last7day = new Date(curDate.getTime() - 7 * 24 * 60 *
                                    60 * 1000);
                                var preDate_last7day_str = preDate_last7day.getFullYear().toString() +
                                    "-" +
                                    (preDate_last7day.getMonth() + 1) + "-" + preDate_last7day.getDate();
                                var start_time_str = preDate_last7day_str + " 00:00:00";
                                //前一天的23:59:59
                                var preDate_lastday = new Date(curDate.getTime() - 24 * 60 * 60 *
                                    1000);
                                var preDate_lastday_str = preDate_lastday.getFullYear().toString() +
                                    "-" +
                                    (preDate_lastday.getMonth() + 1) + "-" + preDate_lastday.getDate();
                                var end_time_str = preDate_lastday_str + " 23:59:59";
                                start_time_number = new Date(start_time_str).getTime();
                                var start_time_index = timeData.findIndex(get_start_time_index);
                                end_time_number = new Date(end_time_str).getTime();
                                var end_time_index = timeData.findIndex(get_end_time_index);
                               //渲染chart
                                option_history.dataZoom.forEach(function(data){
                                    data.startValue = start_time_index;
                                    data.endValue = end_time_index;
                                })
                                myChart_history.setOption(option_history);
                            }
                            //最近一个月
                            else if (selected == 4) {
                                //前一月的00:00:00
                                var preDate_lastMonth_str = lastMonthDate()
                                var start_time_str = preDate_lastMonth_str + " 00:00:00";
                                //前一天的23:59:59
                                var preDate_lastday = new Date(curDate.getTime() - 24 * 60 * 60 *
                                    1000);
                                var preDate_lastday_str = preDate_lastday.getFullYear().toString() +
                                    "-" +
                                    (preDate_lastday.getMonth() + 1) + "-" + preDate_lastday.getDate();
                                var end_time_str = preDate_lastday_str + " 23:59:59";
                                start_time_number = new Date(start_time_str).getTime();
                                var start_time_index = timeData.findIndex(get_start_time_index);
                                end_time_number = new Date(end_time_str).getTime();
                                var end_time_index = timeData.findIndex(get_end_time_index);
                               //渲染chart
                                option_history.dataZoom.forEach(function(data){
                                    data.startValue = start_time_index;
                                    data.endValue = end_time_index;
                                })
                                myChart_history.setOption(option_history);
                            }
                            //异常
                            else {
                                throw new Error("时间超出范围");
                            }
                        } else {
                            $("#history_chart").css("display", "none");
                            $("#realtime_chart").css("display", "block");
                        }
                    } else {
                        alert("请选择一个时间")
                    }
                }
            });
        });
    </script>